<template>
    <div> 
<h1>卡卷信息显示</h1>
        <br>
        <a href="/up">修改卡卷</a>
        <br>
          门店选择:
          <select v-model="page.shopid">
             <option value="0">请选择门店</option>
             <option v-for="e in shopxlk" :value="e.id">{{ e.shopName }}</option>
          </select>
          卡卷名称:
          <input type="text" placeholder="卡卷名称" v-model="page.cardname">
          卡卷类型:
           <select v-model="page.typeid">
             <option value="0">请选择卡卷类型</option>
             <option v-for="e in cardxlk" :value="e.id">{{ e.cardTypeName }}</option>
          </select>
          状态:
           <select v-model="page.stateid">
             <option value="0">请选择状态</option>
             <option v-for="e in statexlk" :value="e.id">{{ e.stateName }}</option>
          </select> 
          <input type="button" value="查询" @click="chax">
          <input type="button" value="重置" @click="cz">
          <br>
           <input type="button" value="批量下架" @click="pxstate">
         <table class="table">
             <thead>
                <tr> 
                    <td><input type="checkbox" v-model="quanxuan" @change="qx"></td>
                    <td>卡卷id</td>
                    <td>卡卷名称</td>
                    <td>卡卷类型</td>
                    <td>门店名称</td>
                    <td>适用日期</td>
                    <td>有效日期</td>
                    <td>价格</td>
                    <td>排序</td>
                    <td>状态</td>
                    <td>图片</td>
                    <td>删除</td>
                    <td>修改状态</td>
                    <td>修改</td>
                </tr>
             </thead>
             <tbody v-for="e in data">
                  <tr>
                    <td><input type="checkbox" v-model="quanx" :value="e.id"></td>
                    <td>{{ e.id }}</td>
                    <td>{{ e.name }}</td>
                    <td>{{ e.cardTypeName }}</td>
                    <td>{{ e.shopName }}</td>
                    <td>{{ e.syDate }}</td>
                    <td>{{ e.yxdate }}</td>
                    <td>{{ e.price }}</td>
                    <td>{{ e.px }}</td>
                    <td  :style="e.stateName=='上架'?'color:red':'color:green'">{{ e.stateName }}</td>
                    <td><img :src="'https://localhost:7161/'+e.imgUrl" style="height: 60px; width: 60px;"></td>
                    <td><input type="button" value="删除" @click="deletecard(e.id)"></td>
                    <td><input type="button" :value="e.stateName=='上架'?'下架':'上架'" @click="Updatecard(e.id)"></td>
                <td><input type="button" value="修改" @click="updatrcard(e.id)"></td>
                </tr>
             </tbody>
         </table>
         一共{{pageinfo.listcount}}页,一共{{pageinfo.count}}条,每页显示{{page.pageSize}}条,当前第{{page.pageIndex}}页
    <input type="button" value="首页" @click="dianjiye(1)">
    <input type="button" value="下一页" @click="dianjiye(2)">
    <input type="button" v-for="e in pageinfo.listcount" :value="e" @click="dj(e)"> 
    <input type="button" value="上一页" @click="dianjiye(3)">
    <input type="button" value="尾页" @click="dianjiye(4)">
    <input type="number" v-model="page.pageIndex"><input type="button" value="跳转" @click="tz  ">
 
    <select v-model="page.pageSize" @change="yrl">
        <option :value="3">3</option>
        <option :value="5">5</option>
        <option :value="8">8</option>
    </select>
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
import axios from 'axios'
import { useRoute,useRouter } from 'vue-router';
const router=useRouter();
const route=useRoute();
onMounted(()=>{
    ShopX();
    cardX();
    stateX();
    show();
})
//修改页
const updatrcard=(val:any)=>{
  router.push({path:"/up",query:{id:val}})
}

//修改状态
const Updatecard=(val:any)=>{
 if(!confirm("确认修改状态吗?"))
{
    return;
}
axios.get("/api/Card/DgStateUpdate",{params:{id:val}}).then(res=>{
    if(res.data>0)
{
    alert("状态修改成功");
    show();
}
else{
    alert('状态修改失败');
    return
}
})
}

//逻辑删除
const deletecard=(val:any)=>{
    if(!confirm("确认删除吗?"))
{
    return;
}
 axios.delete("/api/Card/DeleteCard",{params:{id:val}}).then(res=>{
    if(res.data>0)
 {
    alert("逻辑删除成功");
    show();
 }
 else{
    alert("逻辑删除失败");
    return;
 }
 })
}
//批量修改
const pxstate=()=>{
    if(!confirm("确认批量下架吗?"))
{
    return;
}
    axios.get("/api/Card/StateUpdate",{params:{idstring:quanx.value.toString()}}).then(res=>{
        if(res.data>0)
    {
        alert("批量下架成功")
        quanx.value=[]
        show();
    }
    else{
        alert("批量下架失败")
        return;
    }
    })

}

//全选全取消
const quanxuan=ref(false);
const quanx= ref([]);

const qx=()=>{
    if(quanxuan.value)
{ 
    quanx.value=[]
   data.value.forEach(e=>{
    quanx.value.push(e.id)
     
   })
}
else{
     quanx.value=[]
}
}


//查询
const chax=()=>{
    show();
}
//重置
const cz=()=>{
    (page.value.cardname="");
    (page.value.shopid=0);
    (page.value.stateid=0);
    (page.value.typeid=0);
}

//门店下拉框
const shopxlk=ref([{
    "id": 1,
    "shopName": "昌平店"
}])
const ShopX=()=>{
    axios.get("/api/Shop").then(res=>{
        shopxlk.value=res.data
    })
}
//卡卷下拉框
const cardxlk=ref([{
    "id": 1,
    "cardTypeName": "限时卡"
}])
const cardX=()=>{
    axios.get("/api/Type").then(res=>{
        cardxlk.value=res.data
    })
}
//状态下拉框
const statexlk=ref([{
    "id": 1,
    "stateName": "上架"
}])
const stateX=()=>{
    axios.get("/api/State").then(res=>{
        statexlk.value=res.data
    })
}

//也容量
const yrl=()=>{
    page.value.pageIndex=1;
    show();
}

//跳转
const tz=()=>{
    if(page.value.pageIndex>1 && page.value.pageIndex<=pageinfo.value.listcount)
{
show();
}
else{
page.value.pageIndex=1
}
    
}

//分页点击
const dj=(val:any)=>{
    page.value.pageIndex=val
    show();
}

//分页
const dianjiye=(val:any)=>{
    if(val==1)
{
  page.value.pageIndex=1;
}
 if(val==2)
{
 if(page.value.pageIndex<pageinfo.value.listcount)
 {
      page.value.pageIndex+=1
 }
}
 if(val==3)
{
 if(page.value.pageIndex>1)
 {
      page.value.pageIndex-=1
 }
}
 if(val==4)
{
  page.value.pageIndex=pageinfo.value.listcount;
}

show();
}


const data= ref([{"id": 1,
      "name": "",
      "cardTypeid": 1,
      "shopnameid": 1,
      "syDate": "周一,周二",
      "yxdate": "不限时",
      "price": 88,
      "px": 1,
      "stateid": 1,
      "imgUrl": "string",
      "cardTypeName": "限时卡",
      "shopName": "昌平店",
      "stateName": "上架"
}])
const page =ref({
    pageIndex:1,
    pageSize:5,
    shopid:0,
    cardname:"",
    typeid:0,
    stateid:0,
})

const pageinfo=ref({
    count:0,
    listcount:0
})

const show=()=>{
    axios.get("/api/Card/ShowCard/",{params:page.value}).then(res=>{
        data.value=res.data.listcount

        pageinfo.value.count=res.data.count

        pageinfo.value.listcount=Math.ceil(pageinfo.value.count/page.value.pageSize);
    })
}

</script>

<style scoped>

</style>